<template>
  <div>
        <ul>
        <li v-for="(msg) in msgs" :key="msg.id">
            <!-- 跳转路由并携带参数，to的字符串写法 。使用 params 传参-->
            <!-- <router-link  :to="`/home/message/detail/${msg.id}/${msg.title}`">{{msg.title}}</router-link> -->

            <!-- 跳转路由并携带参数，to的对象写法,注意使用 params传参的对象写法，只能配合name写法，不能使用 path 路径 -->
            <router-link :to="{
                // path:'/home/message/detail',
                name:'xiangqing',
                query:{
                    id : msg.id,
                    title : msg.title
                }
            }">
                {{msg.title}}
            </router-link>
            <button @click="pushShow(msg)">plush查看</button>
            <button @click="replaceShow(msg)">replace跳转</button>
        </li>
        </ul>
        <hr>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name:'Message',
        data(){
            return {
                msgs:[
                    {id:'001',title:'message001'},
                    {id:'002',title:'message002'},
                    {id:'003',title:'message003'}
                ]
            }
        },
        methods:{
            pushShow(msg){
                this.$router.push({
                    // path:'/home/message/detail',
                    name:'xiangqing',
                    query:{
                        id : msg.id,
                        title : msg.title
                    }
                });
            },
            replaceShow(msg){
                 this.$router.replace({
                    // path:'/home/message/detail',
                    name:'xiangqing',
                    query:{
                        id : msg.id,
                        title : msg.title
                    }
                });
            }
        },
        beforeDestroy(){
            console.log('Message即将销毁');
        }
    }
</script>

<style>

</style>